<template>
	<el-dialog title="专辑" v-model="visible" @closed="closed" top="3vh">
		<form class="form-horizontal" v-on:submit.prevent="onSubmit">
			<div class="form-group">
				<label class="col-sm-2 control-label">名称</label>
				<div class="col-sm-10">
					<input type="text" v-model.trim="model.title" class="form-control parsley-validated" required="true">
				</div>
			</div>
			<div class="line line-dashed b-b line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">媒体类型</label>
				<div class="col-sm-10">
					<el-select v-model="model.mediaType" placeholder="媒体类型">
						<el-option v-for="item in mediaTypes" :key="item.code" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="line line-dashed b-b line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">发布</label>
				<div class="col-sm-10">
					<label class="switch">
						<input type="checkbox" @click="publish($event);" v-model="publishState">
						<span></span>
					</label>
				</div>
			</div>
			<div class="line line-dashed b-b line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">海报</label>
				<div class="col-sm-10">
					<img v-if="model.poster" height="450" :src="$api.file.url.view + model.poster" alt="" class="r r-2x m-b-sm">
					<div>
						<a href="#image-upload" data-toggle="modal" class="btn btn-success">选择图片</a>
						<image-upload v-on:getPoster="getPoster"></image-upload>
					</div>
				</div>
			</div>
			<div class="line line-dashed b-b line-lg pull-in"></div>
			<div class="form-group">
				<div class="col-sm-10 col-sm-offset-2 text-right">
					<button type="button" class="btn btn-primary" @click="visible = false">取 消</button> &nbsp;
					<button type="submit" class="btn btn-success">提交</button>
				</div>
			</div>
		</form>
	</el-dialog>
</template>

<script scoped>
	export default {
		name: "albumForm",
		props: {
			visibled: {
				type: Boolean,
				default: false
			},
			id: {
				type: Number,
				default: null
			}
		},
		data() {
			return {
				publishState: true,
				visible: false,
				fileList: [],
				mediaTypes: [],
				model: {
					title: '',
					mediaType: '',
					poster: '',
					publish: true
				}
			}
		},
		mounted() {
			this.$api.sysDict.queryDictItems("media_type").then(data => {
				this.mediaTypes = data;
			});
		},
		methods: {
			closed() {
				this.model = {};
				this.$emit('close', this.model);
			},
			onSubmit() {
				if (this.model.id == null) {
					this.$api.album.add(this.model).then(data => {
						this.model.id = data.id;
						console.debug('model.id', data.id);
						this.$emit('refreshList'); //刷新列表
						this.closed();
					});
				} else {
					this.$api.album.update(this.model).then(data => {
						this.$emit('refreshList'); //刷新列表
						this.closed();
					});
				}
			},
			publish(e) {
				console.debug('publish:', e.currentTarget.checked);
				this.model.publish = e.currentTarget.checked ? '1' : '0';
			},
			getPoster(code) {
				this.model.poster = code;
			}
		},
		watch: {
			visibled(newValue, oldValue) {
				this.visible = newValue;
			},
			id(id, oldValue) {
				if (id != null) {
					this.$api.album.queryById(id).then(data => {
						this.model = data;
					});
				}
			}
		}
	}
</script>

<style>
</style>
